<template>
  <div class="mine">
    <van-nav-bar
  title="订单"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
    <div class="mine-top">
      <div class="top-one"></div>
      <div class="my-order">
        <div class="bbb" v-if="oneaddress" @click="changeadd">
          <p>{{oneaddress.address}}</p>
          <p>{{oneaddress.name}}</p>
          <p>{{oneaddress.tel}}</p>
        </div>
        <van-button v-else type="success" @click="addaddress">+添加地址</van-button>
      </div>
    </div>
    <div class="add-list">
      <ul class="c">
        <li class="o">
          <div class="add-pic">品牌精选</div>
          <span>已免运费|领券</span>
        </li>
        <li v-for="item in goods" :key="item.id" class="aaa">
          <van-card
            :num="item.num"
            :price="item.price"
            desc
            :title="item.goodsname"
            :thumb="$pregImg+item.img"
          />
        </li>
        <li class="o">
          <div class="add-pic">发票类型</div>
          <span>不开发票></span>
        </li>
        <li class="o">
          <div class="add-pic">售后免邮</div>
          <span>部分商家赠送</span>
        </li>
        <li class="o">
          <div class="add-pic">卖家留言</div>
          <span>填写内容要与商家确认</span>
        </li>
      </ul>
    </div>
    <div class="ccc">
      <ul class="abc">
        <li class="o">
          <div class="abc-l">商品金额</div>
          <span>200</span>
        </li>
        <li class="o">
          <div class="abc-l">优惠活动</div>
          <span>200</span>
        </li>
        <li class="o">
          <div class="abc-l">优惠券</div>
          <span>200</span>
        </li>
      </ul>
    </div>
    <van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>

import { mapActions, mapGetters } from "vuex";
import { orderadd } from "../../request/api";
export default {
  data() {
    return {
      goods: [],
      yes: true,
      // oneaddress:localStorage.getItem('addresss')?JSON.parse(localStorage.getItem('addresss')):''
      oneaddress: this.oneaddress,
      allprice:this.allprice,
    };
  },
  methods: {
    ...mapActions({
      datasActions: "address/datasActions",

      addorderrequest: "address/addorderActions"
    }),
    changeadd(){
      this.$router.push('address')

    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onSubmit() {
      let params = {
        uid: JSON.parse(sessionStorage.getItem("user")).uid,
        countmoney: this.goods[0].countmoney,
        countnumber: this.goods[0].countnumber,

        idstr: this.goods[0].idstr
        // address: this.oneaddress.address,
      };

      orderadd(params)
        .then(res => {
          // console.log(res.list.outTradeNo.split(',')[0]);
          this.$router.push({
            path: "/pay",
            query: {
              orderCode: res.list.outTradeNo,
              countmoney: this.goods[0].countmoney
            }
          });
        })
        .catch(err => {
          console.log(err);
        });
    },

    addaddress() {
      this.$router.push(`/address?id=${JSON.stringify(this.alldata)}`);
    }
  },
  mounted() {
    this.goods = JSON.parse(this.$route.query.goods);
    this.datasActions(this.goods[0]);
    this.oneaddress = sessionStorage.getItem("address")
      ? JSON.parse(sessionStorage.getItem("address"))
      : "";
    // console.log(JSON.parse(sessionStorage.getItem('address')));
    // console.log(this.goods);
    let a = 0;
    this.a = this.goods.map(item => (a += item.price));
    this.allprice=a*100
  },
  computed: {
    ...mapGetters({
      alldata: "address/data"
      // oneaddress:"address/oneaddress"
    })
  }
};
</script>

<style scoped>
.ccc {
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-bottom: 1rem;
  /* padding-bottom: .1rem; */
  background-color: #fff;
}
.o {
  display: flex;
  justify-content: space-between;
}
.aaa {
  margin-bottom: 0.1rem;
}
li {
  list-style: none;
}
.add-bot {
  width: 100%;
  height: 110px;
  background-color: #fff;
  padding: 0.1rem 0;
}
.van-card {
  width: 100%;
}
.mine {
  background-color: #efefef;
  padding-bottom: 0.49rem;
  height: 100vh;
  margin-bottom: 60px;
}
.mine-top {
  width: 100%;
  margin: 0 auto;
  height: 1rem;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
  box-shadow: 0 2px 6px 0 rgba(255, 149, 128, 0.5);
  position: relative;
  margin-bottom: 0.3rem;
}
.top-one {
  width: 3.55rem;
  height: 0.2rem;
  display: flex;
  margin: 0 auto;
}
.my-order {
  margin: 0 auto;
  width: 3.55rem;
  background-color: #fff;
  height: 1.03rem;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: space-between;
}
.add-list {
  width: 100%;
  /* height: auto; */
  padding: 0.1rem 0;
  background-color: #fff;
  margin-bottom: 0.1rem;
}
.add-l {
  display: flex;
  flex-direction: column;
  height: 1rem;
}
.add-l li {
  padding: 0 0.1rem;
  flex: 1;
  display: flex;
  justify-content: space-between;
  line-height: 0.3rem;
}
.add-pic {
  height: 10px;
}
</style>